$(function () {
  // 点击退出按钮
  $('.logout').on('click', function () {
    // 提示点击退出之后 
    // 清楚本地存储的token
    // 跳转到登陆页面
    layer.confirm('确定退出登陆吗?', {icon: 3, title:'提示'}, function(index){
      //do something
      
      // 清楚本地存储
      localStorage.removeItem('token')

      // 跳转到登陆界面
      location.href = '/login.html'

      // 执行完之后关闭弹出层
      layer.close(index);
    })
  })

})

  // 封装用户信息基本参数
   // 自定义请求头  参考axios文档 请求配置 因为需要身份认证向服务器发送token
  // 出现401业务状态码错误的两种情况
  // 1 没有把token发送给服务器
      // 2 给服务器发送了一个假的token
      //  {
      //   headers: {
      //     Authorization: localStorage.getItem('token')
      //   }
      //   // 在.then() 函数中失败的回调可以省略不写
      //   // Promise.prototype.then(成功的回调,失败的回调)
      // }
      function info() {
        axios.get('/my/userinfo').then(({ data: res }) => {
          // console.log(res);
          // console.log(res.data.id);
          // console.log(res.data.username);
          // console.log(res.data.id);
          // 封装一个渲染页面的函数 保持函数的单一性 和 可维护性
          userinfo(res.data)
          // 失败的回调
        }, (error) => {
          console.dir(error);
          // 找到请求状态码判断是否为401
          // 防止手动篡改本地的token值访问主页
          // console.log(error.response.status);
          if (error.response.status === 401) {
            // 清空本地的token值
            localStorage.removeItem('token')
    
            // 跳转到登陆页面
            location.href = '/login.html'
          }
        })
      }
      // 调用函数 
      info()
    
      // 封装一个渲染用户信息的函数
      function userinfo(res) {
        // console.log(res);
    
        // 变量提升让判断条件里的都可以访问到
        // 有昵称先显示昵称 没有就显示自定义名称
        const name = res.nickname||res.username
        // 首字母大写
        const name_txt = name.charAt().toUpperCase()
    
        // 判断用户是否有图片头像
        // 如果有显示图片头像 隐藏文本头像
        // 如果没有显示文本头像 隐藏图片头像
        // 更改头部用户信息
        if (res.user_pic) {
          $('#header-avatar').html(`
          <img src="${res.user_pic}"
          class="layui-nav-img">
        个人中心
          `)
        } else {
          
          $('#header-avatar').html(`
        <div class="text-avatar">${name_txt}</div>
        个人中心`)
        }
    
        // 更改侧边栏用户信息
        // 判断res.user_pic的值是否为空
        
        if (res.user_pic) {
          $('.user-info-box').html(`
          <img src="${res.user_pic}"
                class="layui-nav-img">
              <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
          `)
        } else {
          $('.user-info-box').html(`
        <div class="text-avatar">${name_txt}</div>
        <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`)
        }
    
        // 重新渲染
        // 在页面元素动态生成好之后，条用layui 提供的element.render()函数
        // 渲染指定区域
        layui.element.render('nav','header-nav')
}
      
// 实现高亮调用
function heightList(k) {
  // 利用jQuery高级中的contains方法
  // 清空dd上的所有类名
  $('dd').removeClass('layui-this')
  // 使用contains方法 单独加类名
  $(`dd:contains("${k}")`).addClass('layui-this')
}